<template>
  <div class="contact-page">
    <!-- 背景图片 -->
    <div class="page_bg" :style="`background: url(${require('@/assets/images/indb.jpg')}) center top no-repeat;`"></div>
    
    <!-- 主要内容 -->
    <div class="container">
      <div class="row">
        <!-- 右侧主内容区域 -->
        <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
          <div class="list_box">
            <h2 class="left_h2">联系我们</h2>
            <div class="contents" id="maximg" v-if="!loading">
              <div class="contact-info">
                <span style="font-size:16px;" v-html="pageContent.content">
                </span>
              </div>
              
              <!-- 附加的联系方式信息 -->
              <div class="additional-contact mt-4">
                <h3 class="contact-section-title">其他联系方式</h3>
                <div class="contact-methods">
                  <div class="contact-method" v-if="contactInfo.tel">
                    <i class="contact-icon">📞</i>
                    <div class="method-info">
                      <h4>客服热线</h4>
                      <p>{{ contactInfo.tel }}（工作日 9:00-18:00）</p>
                    </div>
                  </div>
                  
                  <div class="contact-method" v-if="contactInfo.email">
                    <i class="contact-icon">✉️</i>
                    <div class="method-info">
                      <h4>邮箱联系</h4>
                      <p>欢迎发送邮件咨询救助相关事宜</p>
                    </div>
                  </div>
                  
                  <div class="contact-method">
                    <i class="contact-icon">💬</i>
                    <div class="method-info">
                      <h4>在线留言</h4>
                      <p>
                        <router-link to="/guestbook" class="message-link">
                          点击这里提交在线留言
                        </router-link>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 工作时间 -->
              <div class="working-hours mt-4" v-if="contactInfo.working_hours">
                <h3 class="contact-section-title">工作时间</h3>
                <div class="hours-info">
                  <p v-html="contactInfo.working_hours"></p>
                  <p class="emergency-note" v-if="contactInfo.emergency_contact">*{{ contactInfo.emergency_contact }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 左侧边栏 -->
        <div class="col-xs-12 col-sm-4 col-md-3">
          <!-- 导航菜单 -->
          <div class="left_nav" id="categories">
            <h2 class="left_h2">联系我们</h2>
            <ul class="left_nav_ul" id="firstpane">
              <!-- 这里可以添加联系相关的导航项 -->
            </ul>
          </div>
          
          <!-- 搜索框 -->
          <form @submit.prevent="performSearch">
            <div class="input-group search_group">
              <input 
                type="text" 
                v-model="searchKeyword"
                class="form-control input-sm" 
                placeholder="信息查询"
              >
              <span class="input-group-btn">
                <button @click="performSearch" class="btn btn-sm mysearch_btn" type="button">
                  搜 索
                </button>
              </span>
            </div>
          </form>
          
          <!-- 养宠知识 -->
          <div class="left_news">
            <h2 class="left_h2">养宠知识</h2>
            <ul>
              <li v-for="article in knowledgeArticles" :key="article.id">
                <router-link :to="`/pet-column/article/${article.id}`" :title="article.title">
                  {{ article.title }}
                </router-link>
                <span class="news_time">{{ formatDate(article.date) }}</span>
              </li>
            </ul>
          </div>
          
          <!-- 联系我们 -->
          <div class="left_contact">
            <h2 class="left_h2" style="margin-bottom:20px;">联系我们</h2>
            <p v-if="contactInfo.name">联系人：{{ contactInfo.name }}</p>
            <p v-if="contactInfo.phone">手机：{{ contactInfo.phone }}</p>
            <p v-if="contactInfo.tel">电话：{{ contactInfo.tel }}</p>
            <p v-if="contactInfo.email">邮箱：{{ contactInfo.email }}</p>
            <p v-if="contactInfo.address">地址：{{ contactInfo.address }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ApiService from '@/services/api'

export default {
  name: 'ContactIndex',
  data() {
    return {
      searchKeyword: '',
      pageContent: {
        title: '联系我们',
        content: '加载中...'
      },
      contactInfo: {},
      knowledgeArticles: [],
      loading: true
    }
  },
  async mounted() {
    await this.fetchPageContent()
    await this.fetchContactInfo()
    await this.fetchKnowledgeArticles()
  },
  methods: {
    async fetchPageContent() {
      try {
        const response = await ApiService.get('/page-content/contact_main')
        if (response.success) {
          this.pageContent = response.data
        }
      } catch (error) {
        console.error('获取页面内容失败:', error)
      } finally {
        this.loading = false
      }
    },
    async fetchContactInfo() {
      try {
        const response = await ApiService.get('/contact-info')
        if (response.success) {
          this.contactInfo = response.data
        }
      } catch (error) {
        console.error('获取联系信息失败:', error)
      }
    },
    async fetchKnowledgeArticles() {
      try {
        const response = await ApiService.get('/knowledge-articles?pageSize=5')
        if (response.success) {
          this.knowledgeArticles = response.data
        }
      } catch (error) {
        console.error('获取知识文章失败:', error)
      }
    },
    performSearch() {
      if (this.searchKeyword.trim()) {
        this.$router.push({ 
          path: '/pet-column', 
          query: { search: this.searchKeyword } 
        })
      }
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.contact-page {
  padding-top: 0; /* 使用全局body padding-top */
}

.page_bg {
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
  margin-bottom: 30px;
}

.list_box {
  background: white;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_h2 {
  color: #04A07B;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #04A07B;
}

.contents {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.contact-info {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  border-left: 4px solid #04A07B;
  margin-bottom: 20px;
}

.contact-info strong {
  color: #04A07B;
  font-weight: 600;
}

.additional-contact {
  margin-top: 30px;
}

.contact-section-title {
  color: #04A07B;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid #04A07B;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.contact-method:hover {
  background: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.contact-icon {
  font-size: 24px;
  margin-right: 15px;
  margin-top: 2px;
}

.method-info h4 {
  color: #333;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.method-info p {
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.message-link {
  color: #04A07B;
  text-decoration: none;
  font-weight: 500;
}

.message-link:hover {
  color: #038066;
  text-decoration: underline;
}

.working-hours {
  margin-top: 30px;
}

.hours-info {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  border-left: 4px solid #04A07B;
}

.hours-info p {
  margin-bottom: 12px;
  color: #333;
}

.hours-info p:last-child {
  margin-bottom: 0;
}

.hours-info strong {
  color: #04A07B;
  font-weight: 600;
}

.emergency-note {
  color: #dc3545 !important;
  font-style: italic;
  font-size: 14px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #dee2e6;
}

/* 侧边栏样式 */
.left_nav, .left_news, .left_contact {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_nav_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_nav_ul li {
  border-bottom: 1px solid #eee;
}

.left_nav_ul li:last-child {
  border-bottom: none;
}

.biglink {
  display: block;
  padding: 12px 0;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.biglink:hover {
  color: #04A07B;
}

.biglink.curr {
  color: #04A07B;
  font-weight: bold;
}

.search_group {
  margin-bottom: 20px;
}

.mysearch_btn {
  background: #04A07B;
  color: white;
  border: none;
}

.mysearch_btn:hover {
  background: #038066;
}

.left_news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_news li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left_news li:last-child {
  border-bottom: none;
}

.left_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 10px;
  font-size: 14px;
}

.left_news a:hover {
  color: #04A07B;
}

.news_time {
  color: #999;
  font-size: 12px;
}

.left_contact p {
  margin-bottom: 8px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .col-xs-12.col-sm-8.col-md-9 {
    float: none !important;
    order: 2;
  }
  
  .col-xs-12.col-sm-4.col-md-3 {
    order: 1;
    margin-bottom: 20px;
  }
  
  .contact-page {
    padding-top: 0; /* 使用全局body padding-top */
  }
  
  .list_box {
    padding: 20px;
  }
  
  .contact-info, 
  .hours-info {
    padding: 20px;
  }
  
  .contact-method {
    padding: 15px;
  }
  
  .contact-methods {
    gap: 15px;
  }
}

/* 动画效果 */
.contact-method {
  animation: fadeInUp 0.6s ease-out;
}

.contact-method:nth-child(1) { animation-delay: 0.1s; }
.contact-method:nth-child(2) { animation-delay: 0.2s; }
.contact-method:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
